<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>v-html指令</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
    <div>你好，{{name}}</div>
    <!--  123会被v-text替换掉-->
    <div v-html="name">123</div>
    <!--将里边的标签进行解析-->
    <div v-html="str"></div>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: '#root',
        data: {
            name: 'JOJO',
            str: '<h3>你好啊！</h3><br>你好啊!'
        }
    })

    /**
     * 与v-text不同的是,v-html会解析文本内容中存在的标签
     *
     *  需要注意的是:v-html有安全性问题!
     *      在网站上动态渲染任意html是非常危险的,容易导致XSS攻击
     *      一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上!!!
     */
</script>
</html>

